<template>
  <div class="info-root info-buttons-root">
    <div class="info-title">
      操作台
      <el-tag type="info" style="margin-left:10px;">
        {{ currentMachine.appName }}
      </el-tag>
    </div>
    <div class="info-content">
      <!-- row1 -->
      <el-row justify="space-around" style="width:100%;">
        <el-col :span="6">
          <el-button size="default" @click="toRoute('/indexMonitorLog')"><el-icon
              class="icongc gc-data-elasticsearch"></el-icon>日志监控</el-button>
        </el-col>
        <el-col :span="6">
          <el-button size="default" @click="toRoute('/indexSentinel')"><el-icon
              class="icongc gc-liuliangtongji"></el-icon>流量监控</el-button>
        </el-col>
        <el-col :span="6">
          <el-button size="default" @click="toRoute('/indexJvm')"><el-icon
              class="icongc gc-jvmxinxi"></el-icon>内存监控</el-button>
        </el-col>
      </el-row>

      <!-- row2 -->
      <el-row justify="space-around" style="margin-top:10px;width:100%;">
        <el-col :span="6">
          <el-button size="default" @click="toRoute('/indexTracker')"><el-icon
              class="icongc gc-icon-lianlu"></el-icon>链路追踪</el-button>
        </el-col>
        <el-col :span="6">
          <el-button size="default" @click="tableAlertShowHandler"><el-icon
              class="icongc gc-jinggao"></el-icon>警告记录</el-button>
        </el-col>
        <el-col :span="6">
          <el-button size="default" @click="settingShowHandler"><el-icon
              class="icongc gc-shezhi"></el-icon>监控设置</el-button>
        </el-col>
      </el-row>
    </div>
  </div>

  <el-drawer :append-to-body="true" :destroy-on-close="true" v-model="tableAlertShow" :title="'警告记录'" :direction="'rtl'"
    :size="775">
    <tableAlert></tableAlert>
  </el-drawer>

  <el-drawer :append-to-body="true" v-model="settingShow" :title="'应用配置'" :direction="'rtl'" :size="450">
    <monitorSetting></monitorSetting>
  </el-drawer>
</template>

<script setup lang="ts">
import router from '@/router';
import { ref, inject } from "vue";
import monitorSetting from "./MonitorSetting.vue";
import tableAlert from "./alert/TableAlert.vue";

// -------------------- inject
const currentMachine: any = inject('currentMachine')

const settingShow = ref(false);
const settingShowHandler = () => {
  if (settingShow.value === true) {
    settingShow.value = false;
  } else {
    settingShow.value = true;
  }
}

const tableAlertShow = ref(false);
const tableAlertShowHandler = () => {
  if (tableAlertShow.value === true) {
    tableAlertShow.value = false;
  } else {
    tableAlertShow.value = true;
  }
}


const toRoute = (path: string) => {
  router.push({ path: path, query: { appName: currentMachine.value.appName, machineId: currentMachine.value.machineId } })
}

</script>

<style scoped lang="scss">
.info-buttons-root {
  @include box(100%, 130px);
  min-height: 130px;
  margin-top: 15px;

  .chart-alert {
    // @include box(100%, 180px, 100%, 100%, 180px, 180px);
    width: 100%;
    height: 180px;
    min-height: 180px;
    max-height: 180px;
  }

  .table-alert {
    @include box(100%, calc(100% - 200px));
    padding: 10px;
  }

  .info-content {
    @include flex(row, flex-start, space-around);
    flex-wrap: wrap;

    .icongc {
      margin-right: 10px;
    }
  }
}
</style>